<template>
  <div id="">
    <ul class="menuList">
      <li v-for="elem in menuList" :key="elem.key">
        <img :src="elem.imgUrl" alt="">
        <p>{{elem.text}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    menuList:[{
      imgUrl:require('@/assets/sportsMall/class_shop_icon.png'),
      text:'分类'
    },
    {
      imgUrl:require('@/assets/sportsMall/yoga_shop_icon.png'),
      text:'瑜伽'
    },
    {
      imgUrl:require('@/assets/sportsMall/fitnessequipment_shop_icon.png'),
      text:'健身装备'
    },
    {
      imgUrl:require('@/assets/sportsMall/Basketballsupplies_shop_icon.png'),
      text:'篮球用品'
    },
    {
      imgUrl:require('@/assets/sportsMall/badmintonsupplies_shop_icon.png'),
      text:'网球用品'
    },
    {
      imgUrl:require('@/assets/sportsMall/brand_shop_icon.png'),
      text:'品牌'
    },
    {
      imgUrl:require('@/assets/sportsMall/publicpraise_shop_icon.png'),
      text:'口碑'
    },
    {
      imgUrl:require('@/assets/sportsMall/signin_shop_icon.png'),
      text:'签到'
    }]
  }),
  mounted() {
    //do something after mounting vue instance

  }
}
</script>
<style lang="scss" scoped>
.menuList{
  @include flex;
  flex-wrap: wrap;
  background: white;
  padding: 10px 0;
  li{
    width: 25%;
    text-align: center;
    font-size: 16px;
    margin-bottom: 15px;
    img{
      width: 50%;
      margin-bottom: 4px;
    }
  }
}
</style>
